<template>
    <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg border border-white/50 p-6">
        <div class="flex flex-col items-center text-center">
            <div class="w-16 h-16 rounded-full flex items-center justify-center mb-4" :class="statusTag.bgClass">
                <svg class="w-8 h-8" :class="statusTag.iconClass" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path v-if="status === 'pending'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    <path v-else-if="status === 'approved'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    <path v-else-if="status === 'rejected'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            
            <h3 class="text-lg font-bold mb-2" :class="statusTag.textClass">
                {{ statusTag.text }}
            </h3>
            
            <p class="text-sm text-gray-600 mb-4 leading-relaxed">
                {{ statusTag.content }}
            </p>
            
            <div v-if="reason" class="w-full p-3 bg-gray-50 rounded-lg">
                <p class="text-xs text-gray-500 font-medium mb-1">审核原因：</p>
                <p class="text-sm text-gray-700">{{ reason }}</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps<{
    status?: string
    reason?: string
}>()

const statusTag = computed(() => {
    if (!props.status) return { 
        bgClass: 'bg-gray-100', 
        iconClass: 'text-gray-500', 
        textClass: 'text-gray-900', 
        text: '未知状态', 
        content: '状态信息未加载' 
    }
    if (props.status === 'pending') return { 
        bgClass: 'bg-orange-100', 
        iconClass: 'text-orange-500', 
        textClass: 'text-orange-700', 
        text: '审核中', 
        content: '您的题目正在审核中，请耐心等待' 
    }
    if (props.status === 'approved') return { 
        bgClass: 'bg-green-100', 
        iconClass: 'text-green-500', 
        textClass: 'text-green-700', 
        text: '已通过', 
        content: '恭喜！您的题目已通过审核，可以在公共题库中查看' 
    }
    if (props.status === 'rejected') return { 
        bgClass: 'bg-red-100', 
        iconClass: 'text-red-500', 
        textClass: 'text-red-700', 
        text: '已拒绝', 
        content: '很抱歉，您的题目未通过审核，请查看审核原因并修改后重新提交' 
    }
    return { 
        bgClass: 'bg-gray-100', 
        iconClass: 'text-gray-500', 
        textClass: 'text-gray-900', 
        text: '出错了', 
        content: '状态信息异常' 
    }
})


</script>